<template>
  <div class="scroll-wrapper">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell
          v-for="article in list"
          :key="article.art_id.toString()"
          :title="article.title"
          @click="
            $router.push({
              path: '/article/',
              name: 'article',
              params: {
                id: article.art_id.toString(),
              },
            })
          "
        >
        <!-- $router.push('/article/' + article.art_id.toString()) -->
          <div slot="label">
            <van-grid
              v-if="article.cover.images.length"
              :column-num="article.cover.images.length"
            >
              <van-grid-item
                v-for="(url, index) in article.cover.images"
                :key="index"
              >
                <van-image :src="url" lazy-load />
              </van-grid-item>
            </van-grid>

            <!-- 文字区域 -->
            <div class="meta">
              <span>{{ article.aut_name }}</span>
              <span>{{ article.comm_count }}评论</span>
              <span>{{ article.pubdate | relativeTime }}</span>
              <span
                @click="hCloseBtn(article)"
                class="close"
                v-if="$store.getters.isLogin"
              >
                <van-icon name="cross"></van-icon>
              </span>
            </div>
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getArticles } from '@/api/article.js'
import eventBus from '@/utils/eventBus.js'
export default {
  name: 'ArticleList',
  props: {
    channel: {
      type: Object
    }
  },
  data () {
    return {
      list: [],
      timeStamp: Date.now(),
      loading: false, // 是否正在加载
      finished: false, // 是否完成全部的加载
      refreshing: false // 是否在下拉刷新
    }
  },
  methods: {
    // 下拉加载
    async onLoad () {
      // 1. 发送请求
      const res = await getArticles(this.channel.id, this.timeStamp)
      // console.log(res)
      const arr = res.data.data.results // 本身是一个数组
      this.timeStamp = res.data.data.pre_timestamp
      // 2. 把arr中的数据追加到list中
      this.list.push(...arr)
      // 3. 把loading设置为false
      this.loading = false
      // 4. 判断是否加载完成   finished为true时不会触发load事件
      // 若加载完成arr.length为'' -> false
      // 若没有加载完成 arr.length不为'' -> true
      this.finished = !arr.length
    },
    // 上拉刷新
    async onRefresh () {
      const res = await getArticles(this.channel.id, Date.now())
      // console.log(res)
      const arr = res.data.data.results
      this.list.unshift(...arr)
      this.refreshing = false
      this.$toast(`更新${arr.length}条数据`)
    },
    // 子传父 通知父组件显示弹窗
    hCloseBtn (article) {
      // 获取到点击对应的id，id有可能是大数所以需要引入JSONBig来实现，调用toString()方法
      this.$emit('close-popup', article.art_id.toString())
    }
  },
  created () {
    // 用来接收home父组件传来的eventBus事件
    eventBus.$on('delete-article', (articleId) => {
      // 1. 在当前的list中去寻找该项
      //    findIndex(item,index,arr) 三个参数：每一项，下标，数组
      const idx = this.list.findIndex(
        (article) => article.art_id.toString() === articleId
      )
      if (idx === -1) {
        return
      }
      // 2. 删除
      this.list.splice(idx, 1)
    })
  }
}
</script>

<style scoped lang='less'>
.meta {
  display: flex;
  span {
    margin-right: 10px;
  }
  .close {
    // 让它在最右边
    // 它的父级容器是flex的，给当前元素设置左外边距为auto，会让这个元素在父级容器
    // 的最右边
    margin-left: auto;
  }
}
</style>
